<template>
    <div class="app-card">
        <div class='app-card-title' :class=" stateVal ? 'open':'hide' " >
            <div class='app-card-title-content'>{{title}}
                <slot name="titleBtn" />
            </div>
            <div class='app-card-title-right'>
                <span class='rightBtn' v-if='stateVal ' @click="hide">收起
                    <i class="el-icon-arrow-up" />
                </span>
                <span class='rightBtn' v-if='!stateVal' @click="show" >展开
                    <i class="el-icon-arrow-down" />
                </span>
            </div>
        </div>
        <div class='app-card-content' v-if='stateVal '>
            <slot />
        </div>
    </div>
</template>
<script>
export default {
    props:{
        title:'',
        open:{
            type:Boolean,
            default:true
        }
    },
    watch:{
        open(){
            console.log('changed:'+this.open)
            this.stateVal = this.open;
        }
    },
    data(){
        return {
            stateVal:true
        }
    },
    mounted(){
        this.stateVal = this.open;
    },
    methods:{
        hide(){
            this.stateVal =  false;
            this.$emit('hide')
        },
        show(){
            this.stateVal = true;
            this.$emit('show')
        }
    }
}
</script>
<style scoped>
.app-card{
    padding: 0 15px;
    border:1px solid #dedede;
    border-radius: 6px;
    background-color: #fdfdfd;
    width:100%;
}
.app-card-title-content{
    float:left;
    user-select: none;
}
.rightBtn{
    user-select: none;
}

.app-card-title-right{
    float:right;
    color:#004e9b !important;
    font-size:18px;
}
.app-card-title{
    height: 46px;
    border-bottom: 1px solid #dedede;
    color: #333;
    line-height: 45px;
    font-size:18px;
    font-weight: 500;
}
 .app-card-title.hide{
    border-bottom: none;
}
.app-card .rightBtn{
    cursor: pointer;
}
.app-card-content{
    padding-bottom: 15px;
    padding-top: 15px;
}
</style>